<script setup lang="ts" name="FileGroup">
interface FileCategory {
	videos: FilesData[];
	images: FilesData[];
	documents: FilesData[];
	audios: FilesData[];
}

const props = withDefaults(defineProps<{ lists: FilesData[] }>(), {});

const fileLists = computed(() => formatFileData(props.lists));

function formatFileData(data: FilesData[] = []) {
	const obj: FileCategory = {
		videos: [],
		images: [],
		documents: [],
		audios: [],
	};
	data.forEach((v) => {
		if (v.mimeType?.includes('video')) {
			obj.videos.push(v);
		} else if (v.mimeType?.includes('image')) {
			obj.images.push(v);
		} else if (v.mimeType?.includes('audio')) {
			obj.audios.push(v);
		} else {
			obj.documents.push(v);
		}
	});
	return obj;
}
</script>

<template>
	<div class="com-file-group">
		<template v-if="fileLists.images.length">
			<slot name="image" :lists="fileLists.images" :data="fileLists" type="images" />
		</template>

		<template v-if="fileLists.audios.length">
			<slot name="audio" :lists="fileLists.audios" :data="fileLists" type="audios" />
		</template>

		<template v-if="fileLists.videos.length">
			<slot name="video" :lists="fileLists.videos" :data="fileLists" type="videos" />
		</template>

		<template v-if="fileLists.documents.length">
			<slot name="document" :lists="fileLists.documents" :data="fileLists" type="documents" />
		</template>
	</div>
</template>